<script setup>
import {ref,onMounted,reactive} from "vue"
import{useRouter} from "vue-router"
import {register} from "@/api/admin"
import { ElMessageBox, ElMessage } from 'element-plus'
const router = useRouter()


//数据对象
const ruleForm = reactive({
})

//校验规则
const rules = reactive({
    acount:[
    {required: true,message:'请输入用户名',trigger:'blur'}
    ],
    apwd:[
        {required: true,message:'请输入密码',trigger:'blur'},
        {min:6,max:16, message:"密码长度为6到16",trigger:'blur'}
    ],
    permissionId:[
        {required: true,message:'请选择权限',trigger:'change'},
    ]
})

//获取到el-form元素的原生DOM对象
const ruleFormRef = ref()
const handleSubmitForm = (formEl) => {
  if (!formEl) return
  //el-form元素的原生DOM对象，然后进行验证，validateS是DOM对象的函数
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(ruleForm)
      //请求后端api()
      register(ruleForm).then((res) => {
        //显示成功信息
        ElMessage({
            message: res.message,
            type:"success"
        })
        //成功之后，跳转到login页面
        router.push({
            path:'/login',
        })
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//返回事件的回调函数
const handleBackup = () => {
    //备份数据
    router.back()
    console.log('backup!')
}


</script>

<template>
  <div class="login-container">
    <el-card class="login-card" shadow="always">
        <h2 class="login-title">管理员注册</h2>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                status-icon
            >
                <el-form-item label="用户名" prop="acount">
                <el-input v-model="ruleForm.acount" />
                </el-form-item>

                <el-form-item label="密码" prop="apwd" v-if="!ruleForm.id">
                <el-input v-model="ruleForm.apwd" type="apwd" show-apwd />
                </el-form-item>

                <el-form-item label="权限" prop="permissionId">
                    <el-select v-model="ruleForm.permissionId" placeholder="请选择权限">
                        <el-option label="超级管理员" :value="1" disabled />
                        <el-option label="订单管理员" :value="2" />
                        <el-option label="商品管理员" :value="3" />
                        <el-option label="企宣管理员" :value="4" />
                    </el-select>
                </el-form-item>

                <div style="display: flex; width: 100%;height: 70px;align-items: center;justify-content: center;">
                    <el-button
                        type="info"
                        @click="handleSubmitForm(ruleFormRef)"
                        class="login-button"
                    >
                    完成
                    </el-button>
                    <el-button
                        type="info"
                        @click="handleBackup"
                        class="register-button"
                    >
                    返回
                    </el-button>
                </div>



            </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
    height: 100vh;
  background-size: cover; /* 或 'contain' 根据需要选择 */
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/image/20240823/619f531691ffa1637831446904.jpeg');
}

.login-card {
  width: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色，调整透明度 */
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  color: #868686;
}

.login-button {
  width: 40%;
}

.register-button {
  width: 40%;
}
</style>